<template>
  <div class="monitor_detail">
    <div class="title">
      <p class="tip">{{ DetailList?.eventTitle }}-详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom" v-if="false">
          <div class="faultDecriptSummary">{{ DetailList?.eventTitle }}</div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="事件单号">
              {{ DetailList?.eventNo ? DetailList?.eventNo : '--' }}
            </el-descriptions-item>
            <!-- <el-descriptions-item>
                        <template slot="label"> 告警ID </template>
                        {{ DetailList.eventId }}
                    </el-descriptions-item> -->
            <el-descriptions-item label="事件标题">
              {{ DetailList?.eventTitle ? DetailList?.eventTitle : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件来源">
              {{ DetailList?.eventSource ? DetailList?.eventSource : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件等级">
              {{ DetailList?.eventLevel ? DetailList?.eventLevel : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="发生时间">
              {{ DetailList?.createTime ? DetailList?.createTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件类型">
              {{ DetailList?.eventType ? DetailList?.eventType : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属系统">
              {{ DetailList?.appSystemName ? DetailList?.appSystemName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属中心">
              {{ DetailList?.affiliatedCenter ? DetailList?.affiliatedCenter : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="详细描述">
              {{ DetailList?.eventDescr ? DetailList?.eventDescr : '--' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="essential bottom">
          <div class="faultDecriptSummary">{{ DetailList?.eventTitle }}</div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="事件单号">
              {{ DetailList?.eventNo ? DetailList?.eventNo : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件标题">
              {{ DetailList?.eventTitle ? DetailList?.eventTitle : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件来源">
              {{ DetailList?.eventSource ? DetailList?.eventSource : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件等级">
              {{ DetailList?.eventLevel ? DetailList?.eventLevel : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="发生时间">
              {{ DetailList?.createTime ? DetailList?.createTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件类型">
              {{ DetailList?.eventType ? DetailList?.eventType : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属系统">
              {{ DetailList?.appSystemName ? DetailList?.appSystemName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属中心">
              {{ DetailList?.affiliatedCenter ? DetailList?.affiliatedCenter : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              {{ DetailList?.status ? DetailList?.status : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="关闭时间">
              {{ DetailList?.closeTime ? DetailList?.closeTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="处理人">
              {{ DetailList?.handlePersonName ? DetailList?.handlePersonName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="当前责任处室">
              {{ DetailList?.responsibilityDept ? DetailList?.responsibilityDept : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属阶段">
              {{ DetailList?.belongStage ? DetailList?.belongStage : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="建设部门">
              {{ DetailList?.buildDept ? DetailList?.buildDept : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="项目经理">
              {{ DetailList?.techniqueLeader ? DetailList?.techniqueLeader : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="详细描述">
              {{ DetailList?.eventDescr ? DetailList?.eventDescr : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="首次接手时间">
              {{ DetailList?.firstTaskTime ? DetailList?.firstTaskTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="持续时间">
              {{ DetailList?.lastTime ? DetailList?.lastTime : '--' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block" v-if="show">
          <el-timeline>
            <div class="timeout" v-if="tips ? true : false">
              {{ tips }}:{{ DetailList.newTime ? DetailList.newTime : '' }}</div
            >
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>

              <!-- <el-card class="box-card">
                                <div v-for="o in 8" :key="o" class="text item">
                                    {{ "列表内容 " + o }}
                                </div>
                            </el-card> -->
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  // import { eventDeail, pubflowlist } from '../../http/api/monitor';
  import { eventListDetail, pubflowlist } from '@/http/api1';
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const route = useRoute();
  const router = useRouter();
  const activities = reactive([]);
  const changeCode = ref(router.options.history.state.back.split('/')[1]);
  const DetailList = ref('');
  const type = ref(route.params.type);
  const show = ref(true);
  const pageNum = ref('1');
  const pageSize = ref('20');
  const total = ref('');
  const tips = ref('');
  const value = ref(route.params.value);
  const typeCount = ref(route.params.typeCount);
  // const Event_level = ref(route.params.level);
  // const center = ref(route.params.center);
  onMounted(() => {
    if (changeCode.value == 'awareness') {
      tips.value = '';
    } else {
      switch (value.value) {
        case '1':
          tips.value = '接手超时';
          break;
        case '2':
          tips.value = '更新超时';
      }
    }

    eventDeail_list();
    pubflow_list();
  });

  const goBack = () => {
    router.push({
      name: changeCode.value,
      params: {
        type: value.value?value.value:-1,
        typeCount: typeCount.value?typeCount.value:-1,
        eventLevel: -1, 
        orgName: -1,
        // level: Event_level.value,
        // center: center.value
      }
    });
  };
  // const eventDeail_list = () => {
  //   eventDeail({
  //     pageSize: '5',
  //     pageNum: '1',
  //     eventNo: '',
  //     eventId: type.value,
  //     eventTitle: '',
  //     appSystemCode: '',
  //     adjectiveType: value.value,
  //     level: Event_level.value,
  //     center: center.value
  //   }).then((res) => {
  //     if ((res as any).data.code !== 0) {
  //       ElMessage({
  //         message: (res as any).data.msg,
  //         type: 'error'
  //       });
  //       return;
  //     }
  //     DetailList.value = res.data.data.rows[0];
  //   });
  // };
  const eventDeail_list = () => {
    eventListDetail({
      eventId: type.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      DetailList.value = res.data.data;
    });
  };
  const pubflow_list = () => {
    pubflowlist({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      bizId: type.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      activities.length = 0;
      (activities as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
      if (!total.value) {
        show.value = false;
      }
    });
  };
</script>

<style lang="less" scoped>
  .monitor_detail {
    width: 100%;
    min-height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      height: 34px;
      margin-bottom: 12px;
      .tip {
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #46545d;
      }
      .btn {
        width: 80px;
        height: 34px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        border: 0;
      }
    }
    .details {
      display: flex;
      justify-content: space-between;
      .information {
        width: 60%;
        // margin: auto;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .essential {
          // margin-bottom: 40px;
          padding: 20px;
          background: #fff;
          border-radius: 6px;
          .faultDecriptSummary {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #46545d;
            margin-bottom: 20px;
          }
          .el-descriptions {
            :deep(.is-bordered) {
              //border-collapse: separate;
              tbody {
                margin-bottom: 3px;

                .el-descriptions-row {
                  // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
                  // }
                  .el-descriptions-item__cell {
                    &.el-descriptions-item__label {
                      background: #fafafa !important;
                      padding: 10px 10px 0;
                      border: 3px solid #fafafa;
                      border-bottom: none;
                      border-right: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #929ea8;
                    }
                    &.el-descriptions-item__content {
                      background: #fafafa !important;
                      padding: 5px 10px;
                      border-left: 3px solid #fafafa;
                      border-top: none;
                      border-right: 3px solid #fff;
                      border-bottom: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #46545d;
                    }
                  }
                  :deep(.el-descriptions-item__label) {
                    //margin-right: 3px;
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                  }
                }
              }
            }
          }
        }
      }
      .technological {
        width: 35%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .el-divider {
          .el-divider__text {
            font-size: 16px;
            line-height: 35px;
          }
        }
        .block {
          .el-timeline {
            width: 80%;
            margin: 0 auto;
            .timeout {
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            :deep(.el-timeline-item__tail) {
              border: 1px solid #007af5;
            }
            :deep(.el-timeline-item__timestamp) {
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            :deep(.el-timeline-item__content) {
              color: #fff;
              .box-card {
                border-radius: 10px;
                .el-card__body {
                  .text {
                    min-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                    .item {
                      max-width: 70%;
                      color: #46545d;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
